<template>
    <div class="iframeMapBox">
        <div v-if="!editor" class="editorBase">
            <!-- <a :href="editorMapUrl"  @click="linkEditorMapUrl" target="_parent" v-if="linkBtn"> -->
            <el-button type="primary" :isSmart="isSmart" @click="linkEditorMapUrl" v-if="linkBtn">编辑基地</el-button>
            <!-- </a> -->
        </div>
        <iframe :src="editorMapUrl" :width="width" :height="height" class="iframeMap" ref="iframeMap" style="border: medium none;"></iframe>
    </div>
</template>

<script>
import { encode } from "@/utils/encryption.js";
export default {
    props: {
        width: {
            type: String,
            default: "100%",
        },
        height: {
            type: String,
            default: "500px",
        },
        mapKey: {
            type: String,
            default: "",
        },
        baseId: {
            type: String,
            default: "",
        },
        editor: {
            type: Boolean,
            default: false,
        },
        linkBtn: {
            type: Boolean,
            default: true,
        },
        datas: {
            type: String,
            default: "",
        },
        isAdd: {
            type: Boolean,
            default: false,
        },
        isSmart: {
            //是否为智能装备地图
            type: Boolean,
            default: false,
        },
        lngLat: {
            type: Array,
            default: () => [],
        },
        baseLatLng: {
            //飞图
            type: Array,
        },
    },
    name: "mars3d",
    data() {
        return {
            // 地图需要的参数
            mapDatas: {
                baseId: this.baseId,
                phone: this.$store.state.user.userInfo.phone,
                verificationCode: this.$store.state.user.userInfo.verificationCode,
                t: new Date().getTime(),
                editor: this.editor, // 是否可以编辑
                linkBtn: this.linkBtn,
                key: this.mapKey,
                lngLat: this.lngLat,
            },
            editorMapUrl: "",
            newKey: new Date().getTime(),
        };
    },
    watch: {
        baseId(newData) {
            // console.log(newData)
            this.mapDatas.baseId = newData;
            this.setMapUrl();
            let data = {
                baseId: newData,
            };
            this.$refs.iframeMap.contentWindow.postMessage(data, "*");
            // console.log(newData)
            // this.setMapUrl()
        },
    },
    mounted() {
        setTimeout(() => {
            this.setMapUrl();
        }, 300);
        // console.log(this.$refs.iframeMap.contentWindow.initTreeData('tree', this.mapDatas.baseId))
    },
    methods: {
        setMapUrl() {
            // console.log(this.mapDatas)
            if (process.env.NODE_ENV == "production") {
                this.editorMapUrl = `http://59.110.54.18:90#${encode(this.mapDatas)}`;
            } else {
                this.editorMapUrl = `http://192.168.0.129:3301/#${encode(this.mapDatas)}`;
                // this.editorMapUrl = `http://59.110.54.18:90#${encode(this.mapDatas)}`;
            }
        },
        linkEditorMapUrl() {
            let add = JSON.stringify(this.lngLat);
            if (this.isSmart) {
                if (!this.mapDatas.editor) {
                    this.mapDatas.editor = true; // 设置为可编辑
                    this.$emit("cacheData");
                    this.setMapUrl();
                    console.log(this.mapDatas);
                    // debugger
                    this.$router.push(`/editormap?baseId=${this.baseId}&baseLatLng=${add}`);
                    // this.editorMapUrl = `http://59.110.54.18:90#${encode(urlBase)}`
                }
            } else {
                if (this.isAdd == true) {
                    this.$request
                        .postForm(this.$api.checkTemporary, {
                            baseId: this.baseId,
                        })
                        .then((res) => {
                            if (res.data == true) {
                                if (!this.mapDatas.editor) {
                                    this.mapDatas.editor = true; // 设置为可编辑
                                    this.$emit("cacheData");
                                    this.setMapUrl();
                                    console.log(this.mapDatas);
                                    // debugger
                                    this.$router.push(`/editormap?baseId=${this.baseId}&baseLatLng=${add}`);
                                    // this.editorMapUrl = `http://59.110.54.18:90#${encode(urlBase)}`
                                }
                            }
                        });
                } else {
                    if (!this.mapDatas.editor) {
                        this.mapDatas.editor = true; // 设置为可编辑
                        this.$emit("cacheData");
                        this.setMapUrl();
                        console.log(this.mapDatas);
                        // debugger
                        this.$router.push(`/editormap?baseId=${this.baseId}&baseLatLng=${add}`);
                        // this.editorMapUrl = `http://59.110.54.18:90#${encode(urlBase)}`
                    }
                }
                console.log(this.mapDatas);
                // alert(1)
            }
        },
        flyTo(lngLat) {
            console.log(lngLat);
            let data = {
                lngLat: lngLat,
            };
            this.$refs.iframeMap.contentWindow.postMessage(data, "*");
        },
    },
};
</script>

<style scoped="scoped">
.iframeMapBox {
    position: relative;
    height: 100%;
}
.editorBase {
    position: absolute;
    z-index: 99;
    width: 100%;
    top: 10px;
    right: 10px;
    text-align: right;
}
</style>
